<template>
  <div class="document-editor">
    <div class="document-editor__toolbar"></div>
    <div class="document-editor__editable-container">
      <ckeditor :class="document-editor__editable" :editor="editor"
                @ready="onReady" v-model="editorData" :config="editorConfig"></ckeditor>
    </div>
  </div>
</template>

<script>
  import DecoupledEditor from '@/components/j-editor/core/ckeditor'
  import '@/components/j-editor/translations/zh-cn'
  import CKEditor from '@ckeditor/ckeditor5-vue2'
  import { saveAs } from 'file-saver';
  import { getAction, postAction } from '@/api/manage'

  export default {
    props: {
      value: {
        type: String,
        required:false
      },
      placeholder: {
        type: String,
        default: '请输入内容'
      },
    },
    data () {
      return {
        // 编辑器组件需要获取编辑器实例
        document:'document-editor',
        editor__editable:'document-editor__editable',
        editor: DecoupledEditor,
        editorConfig: {
          language: "zh-cn",
          simpleUpload: {
            uploadUrl: window._CONFIG['domianURL']+`/file/sysFile/uploadFileCKeditor`
          },
          heading: {
            options: [
              { model: 'heading1', view: 'h1', title: '标题 1', class: 'ck-heading_heading1' },
              { model: 'heading2', view: 'h2', title: '标题 2', class: 'ck-heading_heading2' },
              { model: 'heading3', view: 'h3', title: '标题 3', class: 'ck-heading_heading3' },
              { model: 'heading4', view: 'h4', title: '标题 4', class: 'ck-heading_heading4' },
              { model: 'heading5', view: 'h5', title: '标题 5', class: 'ck-heading_heading5' },
              { model: 'heading6', view: 'h6', title: '标题 6', class: 'ck-heading_heading6' },
              { model: 'paragraph', title: '正文', class: 'ck-heading_paragraph' }
            ]
          },
          fontSize: {
            options: [8, 10, 'default', 14, 16, 18, 20, 22, 24, 26, 28, 32, 48]
          },
          fontFamily: {
            options: ["宋体", "仿宋", "微软雅黑", "黑体", "仿宋_GB2312", "楷体", "隶书", "幼圆"]
          },
          exportWord: {
            fileName: 'my-file.docx',
            converterOptions: {
              format: 'A4', // Default value, you don't need to specify it explicitly for A4.
              margin_top: '20mm',
              margin_bottom: '20mm',
              margin_right: '12mm',
              margin_left: '12mm'
            }
          }
        },
        editorData: this.value,
        url:{
          htmlFormatUrl:'/platform/doc/docTemplate/htmlFormat',
        }
      }

    },
    methods: {
      onReady(editor) {
       const toolbarContainer = document.querySelector( '.document-editor__toolbar' );
        toolbarContainer.innerHTML='';
        toolbarContainer.appendChild( editor.ui.view.toolbar.element );
        window.editor = editor;
      },
      downloadArticle(){
        var html = this.editorData;
        var param = new URLSearchParams();
        param.append('htmlStr', html)
        postAction(this.url.htmlFormatUrl,param).then(res =>{
          if (res.success) {
            const _static = {
              mhtml: {
                top: "Mime-Version: 1.0\nContent-Base: " + location.href + "\nContent-Type: Multipart/related; boundary=\"NEXT.ITEM-BOUNDARY\";type=\"text/html\"\n\n--NEXT.ITEM-BOUNDARY\nContent-Type: text/html; charset=\"utf-8\"\nContent-Location: " + location.href + "\n\n<!DOCTYPE html>\n<html>\n_html_</html>",
                head: "<head>\n<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\">\n<style>\n_styles_\n</style>\n</head>\n",
                body: "<body>_body_</body>"
              }
            };

            const dealhtml = res.result.html;
            const img = res.result.pics;
            let mhtmlBottom = "\n";
            for (let i = 0; i < img.length; i++) {
              const uri = img[i].src;
              const index = img[i].index;
              mhtmlBottom += "--NEXT.ITEM-BOUNDARY\n";
              mhtmlBottom += "Content-Location: " + index + "\n";
              mhtmlBottom += "Content-Type: " + uri.substring(uri.indexOf(":") + 1, uri.indexOf(";")) + "\n";
              mhtmlBottom += "Content-Transfer-Encoding: " + uri.substring(uri.indexOf(";") + 1, uri.indexOf(",")) + "\n\n";
              mhtmlBottom += uri.substring(uri.indexOf(",") + 1) + "\n\n";
            }
            mhtmlBottom += "--NEXT.ITEM-BOUNDARY--";
            // 如果导出的文档需要生成目录，则使用h标签即可，如果有table也可以设置style
            const styles = `
          h1{font-family: FangSong_GB2312}
          h2{font-family: FangSong_GB2312;font-size:24px;}
          h3{font-family: FangSong_GB2312;font-size:22px;}
          h4{font-family: FangSong_GB2312;font-size:20px;}
          h5{font-family: FangSong_GB2312}
          table {border-collapse:collapse;border: 1px solid #000}
          th{ border: 1px solid #000;font-family: KaiTi_GB2312;padding:5px}
          td{ border: 1px solid #000;font-family: KaiTi_GB2312;padding:5px;min-width:120px}
          `;
            // 整合html代码片段
            const fileContent = _static.mhtml.top.replace("_html_", _static.mhtml.head.replace("_styles_", styles) +_static.mhtml.body.replace("_body_", dealhtml)) + mhtmlBottom;
            // 导出
            const blob = new Blob([fileContent], {
              type: "application/msword;charset=utf-8"
            });
            saveAs(blob, `qisu.doc`);
          }


        })

      }

    },
    watch: {
      value(newValue) {
        this.editorData = (newValue == null ? '' : newValue)
      },
      editorData(newValue) {
        if(this.triggerChange){
          this.$emit('change', newValue)
        }else{
          this.$emit('input', newValue)
        }
      }
    },
    components: {
      // 编辑器组件的局部注册方式
      ckeditor: CKEditor.component
    }
  }
</script>
<style>
  .document-editor {
    border: 1px solid #e8e8e8;
    border-radius: var(--ck-border-radius);

    /* Set vertical boundaries for the document editor. */
    height: calc(100vh - 200px);
    /*box-shadow: 0 0 5px #325899;*/
    /* This element is a flex container for easier rendering. */
    display: flex;
    flex-flow: column nowrap;
  }
  .document-editor__toolbar {
    /* Make sure the toolbar container is always above the editable. */
    z-index: 1;

    /* Create the illusion of the toolbar floating over the editable. */
    box-shadow: 0px 1px 3px rgba(0,0,0,.05);

    /* Use the CKEditor CSS variables to keep the UI consistent. */
    /*border-bottom: 1px solid #d1d1d1;*/
  }

  /* Adjust the look of the toolbar inside the container. */
  .document-editor__toolbar .ck-toolbar {
    border: 0;
    border-radius: 0;
  }
  .document-editor__editable-container {
    padding: calc( 2 * var(--ck-spacing-large) );
    background: #fafafa;

    /* Make it possible to scroll the "page" of the edited content. */
    overflow-y: scroll;
  }

  .document-editor__editable-container .ck-editor__editable {
    /* Set the dimensions of the "page". */
    width: 80%;
    max-width: 920px;
    min-width: 750px;
    margin: 30px;
    min-height: 21cm;

    /* Keep the "page" off the boundaries of the container. */
    padding: 1cm 2cm 2cm;

    /*border: 1px hsl( 0,0%,82.7% ) solid;*/
    border-radius: var(--ck-border-radius);
    background: white;

    /* The "page" should cast a slight shadow (3D illusion). */
    box-shadow: 0 0 5px hsla( 0,0%,0%,.1 );

    /* Center the "page". */
    margin: 0 auto;
  }
  .document-editor .ck-content,
  .document-editor .ck-heading-dropdown .ck-list .ck-button__label {
    font: 16px/1.6 "Helvetica Neue", Helvetica, Arial, sans-serif;
  }
  /* Adjust the headings dropdown to host some larger heading styles. */
  .document-editor .ck-heading-dropdown .ck-list .ck-button__label {
    line-height: calc( 1.7 * var(--ck-line-height-base) * var(--ck-font-size-base) );
    min-width: 6em;
  }

  /* Scale down all heading previews because they are way too big to be presented in the UI.
  Preserve the relative scale, though. */
  .document-editor .ck-heading-dropdown .ck-list .ck-button:not(.ck-heading_paragraph) .ck-button__label {
    transform: scale(0.7);
    transform-origin: left;
  }

  /* Set the styles for "Heading 1". */
  .document-editor .ck-content h1,
  .document-editor .ck-heading-dropdown .ck-heading_heading1 .ck-button__label {
    font-size: 2.15em;
    font-weight: normal;
  }
  .document-editor .ck-content h1 {
    line-height:60px;
    padding-top: .3em;
    margin-bottom: .1em;
  }
  /* Set the styles for "Heading 2". */
  .document-editor .ck-content h2,
  .document-editor .ck-heading-dropdown .ck-heading_heading2 .ck-button__label {
    font-size: 2em;
    font-weight: normal;
  }
  .document-editor .ck-content h2 {
    line-height: 50px;
    padding-top: .25em;
    margin-bottom: .1em;
  }

  /* Set the styles for "Heading 3". */
  .document-editor .ck-content h3,
  .document-editor .ck-heading-dropdown .ck-heading_heading3 .ck-button__label {
    font-size: 1.75em;
    font-weight: normal;
  }

  .document-editor .ck-content h3 {
    line-height: 40px;
    padding-top: .2em;
    margin-bottom: .1em;
  }
  /* Set the styles for "Heading 4". */
  .document-editor .ck-content h4,
  .document-editor .ck-heading-dropdown .ck-heading_heading4 .ck-button__label {
    font-size: 1.5em;
    font-weight:normal;
  }

  .document-editor .ck-content h4 {
    line-height: 32px;
    padding-top: .18em;
    margin-bottom: .2em;
  }

  /* Set the styles for "Heading 5". */
  .document-editor .ck-content h5,
  .document-editor .ck-heading-dropdown .ck-heading_heading5 .ck-button__label {
    font-size:1.25em;
    font-weight: normal;
  }

  .document-editor .ck-content h5 {
    line-height:28px;
    padding-top: .15em;
    margin-bottom: .15em;
  }
  /* Set the styles for "Heading 6". */
  .document-editor .ck-content h6,
  .document-editor .ck-heading-dropdown .ck-heading_heading6 .ck-button__label {
    font-size:1.1em;
    font-weight: normal;
  }

  .document-editor .ck-content h5 {
    line-height:24px;
    padding-top: .15em;
    margin-bottom: .15em;
  }
  /* Set the styles for "Paragraph". */
  .document-editor .ck-content p {
    font-size: 1em;
    line-height: 1.4em;
    padding-top: .5em;
    margin-bottom: 1.13em;
  }

  .document-editor .ck-heading-dropdown .ck-button__label{
     line-height:initial!important;
     padding: 5px 15px!important;
     margin: 0!important;
  }
  A finishing touch that makes the block quotes more sophisticated and the styling is complete.

    /* Make the block quoted text serif with some additional spacing. */
  .document-editor .ck-content blockquote {
    font-family: Georgia, serif;
    margin-left: calc( 2 * var(--ck-spacing-large) );
    margin-right: calc( 2 * var(--ck-spacing-large) );
  }
  .editorModel .ck-heading-dropdown button,
  .editorModel .ck-font-size-dropdown button,
  .editorModel .ck-font-family-dropdown button,
  .editorModel .ck-alignment-dropdown button{
    border: 1px solid #dcdcdc;
    border-radius: 2px;
  }
  .editorModel .ck.ck-button:not(.ck-disabled):hover,
  .editorModel a.ck.ck-button:not(.ck-disabled):hover,
  .editorModel .ck.ck-button.ck-on,
  .editorModel a.ck.ck-button.ck-on{
    background: #e5e5e5;
    border: 1px solid #bcbcbc;
    border-radius: 0;
  }
  .editorModel .ck.ck-icon{
    color: #444;
    font-size: .75333350694em;
  }
  .editorModel .ck.ck-toolbar{
    background: #f8f8f8;
    padding: 2px 8px;
  }
  .editorModel .ck.ck-button.ck-disabled .ck-button__icon,
  .editorModel a.ck.ck-button.ck-disabled .ck-button__icon{
    opacity: 0.3;
  }
  .editorModel .ck.ck-dropdown__panel{
    box-shadow: none;
    border: none;
  }
  .editorModel .ck-dropdown__panel .ck.ck-list__item .ck-button.ck-on{
    background: #1890ff;
  }
  .editorModel .ck-dropdown__panel .ck.ck-list__item .ck-button{
    border-bottom: none;
  }
  .editorModel .ck-dropdown__panel .ck.ck-list__item:last-child .ck-button{
    border-bottom: 1px solid #bcbcbc;
  }
  .ck.ck-editor__editable_inline {
    border: 1px solid transparent!important;
    box-shadow: 0 0 10px 0 rgba(0,0,0,0.1)!important;
  }
</style>